<template>
  <div>
    <el-container class="bgcf5 contaiSp vh100">
      <el-header class="headerSp unselect plr120">
        <div class="admhead flex">
          <div class="vam flex-2 logo-box">
            <img src="@/assets/logo.png" class="vam logo mr5">
            <h1 class="vam dib h1">机器人管理后台</h1>
          </div>
          <ul class="tal vam menuSp flex-7">
            <li v-for="(item,index) in userInfo.rule_list"
                :key="item.label"
                @click="changeBgc(index, item)"
                class="li"
                :class="{'router-link-exact-active': activeMenu === index}">
              <div class="csp topbar-item dib vam">
                <p>{{item.label}}</p>
              </div>
            </li>
          </ul>
          <div class="tar vam headrSp flex-1">
            <el-dropdown class="dib vam wsnw">
              <div class="el-dropdown-link csp">
                <div class="dib vam imgDiv ovh mr5">
                  <img :src="dfIcon" @error="dfIcon = defaultAvatar" class="vat w100 h100">
                </div>
                {{userInfo.realname || userInfo.username}}
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container class="flex h100">
        <el-aside class="aside h100 unselect" style="width: 200px"
                  v-show="activeMenuObj.children && activeMenuObj.children.length">
          <ul class="aside-inner">
            <li class="sub-title pl20 csp"
                :class="{active: activeSubMenu === i}"
                @click="changeBgc(i, sub, 'sub')"
                v-for="(sub, i) in activeMenuObj.children" :key="i">{{sub.title}}
            </li>
          </ul>
        </el-aside>
        <div http-inner-loading class="container flex-1 ova bsb p20 h100 w100"
             :class="{plr120: !activeMenuObj.children || !activeMenuObj.children.length}">
          <router-view/>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    name: "AdminHome",
    computed: {
      ...mapGetters(['userInfo', 'activeMenu', 'activeSubMenu', 'defaultAvatar']),
    },
    watch: {
      activeMenu(val) {
        this.activeMenuObj = this.userInfo.rule_list[val];
      },
      'userInfo.icon'(val) {
        this.dfIcon = val;
      },
    },
    created() {
      this.activeMenuObj = this.userInfo.rule_list[this.activeMenu];
      this.dfIcon = this.userInfo.icon;
    },
    data() {
      return {
        activeMenuObj: {},
        dfIcon: '',
      };
    },
    methods: {
      ...mapMutations(['setUserInfo']),
      changeBgc(index, item, type) {
        if (this.$route.path !== item.path) {
          this.$router.push(item.path);
        } else {
          console.log(item.path);
        }
      },
      //退出登录
      loginOut() {
        this.$confirm("您确定要退出吗?", "退出管理后台", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.setUserInfo({});
          this.$router.push({path: "/login"});
        }).catch(() => {
        });
      }
    },
  };
</script>
<style lang="less">
  .el-header {
    line-height: normal;
    .el-dropdown-link {
      line-height: 60px;
    }
  }

  .plr120 {
    /*padding: 0 120px;*/
    &.container {
      padding: 20px 120px;
    }
  }

  .headerSp {
    background: #188eee;
  }

  .admhead {
    height: 100%;
    color: #fff;
    .logo-box {
      min-width: 200px;
    }
    .logo {
      width: 50px;
      height: 50px;
    }
    .h1 {
      font-size: 20px;
      font-weight: normal;
      line-height: 60px;
    }
    .menuSp .li {
      display: inline-block;
      &.router-link-exact-active {
        background-color: rgba(0, 0, 0, .08);
      }
    }
    .menuSp {
      .topbar-item {
        line-height: 60px;
        padding: 0 20px;
        font-size: 18px;
        color: #fff;
        &:hover {
          background-color: rgba(0, 0, 0, .04);
          text-decoration: none;
        }
      }
      .item-icon {
        width: 24px;
        height: 24px;
      }
    }
    .imgDiv {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #ccc;
    }
    .el-dropdown {
      color: #fff;
    }
  }

  .aside {
    background-color: #354052;
    min-height: calc(100vh - 64px);
    .aside-inner {
      padding: 30px 0;
    }
    .sub-title {
      padding-left: 48px;
      line-height: 40px;
      font-size: 14px;
      color: #999;
      background-color: transparent;
      &.active {
        color: #fff;
        background-color: rgba(0, 0, 0, .2);
      }
      &:not(.active) {
        &:hover {
          background-color: rgba(0, 0, 0, .1);
        }
      }
    }
  }

  .container {
    background-color: #f5f5f5;
  }
</style>